import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import SpacePostMsg from './postMsg'
import SpacePostPictures from './postPictures'
import SpacePostVideo from './postVideo'
import SpacePostArticle from './postArticle'
import SpacePostMusic from './postMusic'
import SpacePostDaka from './postDaka'
import SpacePostLive from './postLive'
import SpacePostShortVideo from './postShortVideo'
import css from './postItem.module.scss'
import { formatNumber, howLong } from '@/utils'
import Avatar from '@/components/Avatar'
class SpacePostItem extends PureComponent {
    static propTypes = {
        post: PropTypes.object
    }

    formatString = (val, str) => {
        if (val === 0) {
            return str
        } else {
            return val
        }
    }
    formatPostAction = (type) => {
        let str = ''
        switch (type) {
            case 8:
                str = ' · 投稿了视频'
                break
            case 16:
                str = ' · 投稿了小视频'
                break
            case 64:
                str = ' · 投搞了文章'
                break
            default:
                str = ''

        }
        return str
    }

    handleSpace = (item) => {
        const { type, mid } = item
        const notSpaces = [512, 4099, 4101]
        if (!notSpaces.includes(type)) {            
            this.props.history.push(`/space/${mid}`)
        }
    }

    handleBangumi = props => {
        this.props.history.push(`/bangumi/ep${props.episodeId}`)
    }

    render() {
        const { post } = this.props
        return (
            <div className={css["panel"]}>
                <div className={css["panel-heading"]}>
                    {   
                        post.level === 1 && 
                        <>
                            { post.avatar && 
                                <Avatar
                                    size="small"
                                    src={post.avatar} 
                                    vip={post.vipStatus} 
                                    official={post.official} 
                                    round  
                                    onClick={() => this.handleSpace(post)}
                                />
                            }

                            <div className="user-info" onClick={() => this.handleSpace(post)}>
                                { post.userName && <span className="user-name">{ post.userName }</span>}
                                { post.postTime && 
                                    <span className="extra">
                                        { howLong(post.postTime) }
                                        <span>{ this.formatPostAction(post.type) }</span>
                                    </span>
                                }                                
                            </div>
                            { post.isSpaceTop && <span className="top-btn"><i className="fa fa-dropup"></i> 置顶</span> }
                            {
                                !post.isSpaceTop && <>
                                    { post.isFollowed === 0 && <span className="follow-btn"><i className="fa fa-plus"></i> 关注</span> }  
                                    { post.isFollowed !== 0 && <span className="follow-btn disabled">已关注</span> }                              
                                </>
                            }                        
                        </>
                    }
                    {
                        post.level !== 1 && post.userName && <span className="user-name origin" onClick={() => this.handleSpace(post)}>@{ post.userName }</span>
                    }
                </div>
                <div className={css["panel-body"]}>
                    {
                        post.msg && 
                            <SpacePostMsg 
                                id={post.id}
                                msg={post.msg}
                                topics={post.topics || []}
                                emojis={post.emojis || []}
                                ats={post.ats || []}
                                votes={post.votes}
                            />
                    }
                    { post.pictures && <SpacePostPictures pictures={post.pictures} /> }
                    { post.video && <SpacePostVideo {...post.video} /> }
                    { post.bangumi && <SpacePostVideo {...post.bangumi} onClick={this.handleBangumi} /> }
                    { post.article && <SpacePostArticle {...post.article} /> }
                    { post.music && <SpacePostMusic {...post.music} /> }
                    { post.daka && <SpacePostDaka {...post.daka} /> }
                    { post.live && <SpacePostLive {...post.live} /> }
                    { post.shortVideo && <SpacePostShortVideo {...post.shortVideo} /> }   
                    { 
                        post.origins ? (
                            post.origins.length === 0 && post.miss === 1 ?
                            <div class="missing"><i class="fa fa-ban"></i> 原动态失效了</div> :
                            <SpacePostItem post={post.origins[0]} history={this.props.history} />
                        ) : ''
                    }                 

                </div>
                {
                    post.level === 1 && 
                    <div className={css["panel-footer"]}>
                        <div className="col">
                            <i className="fa fa-share"></i>{ this.formatString(formatNumber(post.repost), '转发') }
                        </div>
                        <div className="col">
                            <i className="fa fa-comment-o"></i>{ this.formatString(formatNumber(post.reply), '评论') }
                        </div>
                        <div className="col">
                            <i className="fa fa-nice"></i>{ this.formatString(formatNumber(post.like), '赞') }
                        </div>  
                    </div>
                }
                
            </div>
        )
    }
}
export default withRouter(SpacePostItem)